<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <style>
        .activeBtn{
            background-color: pink;
            margin-right: 5px;
            width: 70px;
            height: 50px;
            outline: none;
            border: none;
        }
        .btn{
            background: #ccc;
            margin-right: 5px;
            width: 70px;
            height: 50px;
            outline: none;
            border: none;
        }
        .activeBox{
            background-color: pink;
            display: block;
            width: 300px;
            height: 200px;
        }
        .box{
            display: none;
        }
        .tab_con{
            margin: 100px auto;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="root">
    
    </div>
    <script type="text/babel">
        class Tab extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    iNow:1
                }
            }

            // 修改状态的值要写在state里面，借助setState方法
            fnSwitch = (i)=>{
                this.setState({
                    iNow:i
                })
            }

            render() {
                return (
                    <div className="tab_con">
                        <div className="tab_btns">
                            <input className={(this.state.iNow===1) ? 'activeBtn':'btn'} onClick={()=>this.fnSwitch(1)} type="button" value="按钮1"/>
                            <input className={(this.state.iNow===2) ? 'activeBtn':'btn'} onClick={()=>this.fnSwitch(2)} type="button" value="按钮2"/>
                            <input className={(this.state.iNow===3) ? 'activeBtn':'btn'} onClick={()=>this.fnSwitch(3)} type="button" value="按钮3"/>
                        </div>
                        <div className="tab_cons">
                            <div className={(this.state.iNow===1) ? 'activeBox':'box'}>按钮1对应的内容</div>
                            <div className={(this.state.iNow===2) ? 'activeBox':'box'}>按钮2对应的内容</div>
                            <div className={(this.state.iNow===3) ? 'activeBox':'box'}>按钮3对应的内容</div>
                        </div>
                    </div>
                )
            }
        }
        ReactDOM.render(<Tab/>, document.getElementById('root'));
    </script>
</body>
</html>